<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    	<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    	<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
    	<link rel="stylesheet" type="text/css" href="../css/public.css"/>
    	<link rel="stylesheet" type="text/css" href="../css/fund_details.css"/>
    	<style type="text/css">
    		.blod_black{
    			font-weight: bold;color: #333333;
    		}
    		.cs_jump_content{padding-bottom: 54px;}
    		.cs_table_title{border-top: 1px solid #cfcfcf;margin: 15px 0 0 0;background-color: #f5f6f8;}
    		.canvas_box{padding: 15px;height: 55vw;}
    		.canvas_main{width: 100%;height: 100%; box-sizing: border-box;}
    		.cs_table_box{padding: 0 15px;}
    		.cs_time_box{padding: 0 15px; color: #A6A6A6;}
    		.start_time,.end_time{margin-right:10px;border: 1px solid #a5a5a5;height: 34px;line-height: 34px;font-size: 12px;width: 28%;text-align: center;display: inline-block;border-radius: 7px;}
    		.cs_btn_right{height: 34px;color: #fff;background-color: #fead31;border: none;width: 28%;}
    		.cs_jump_box{position: fixed;bottom: 0;width: 100%;height: 54px;overflow: hidden;background-color: #fff;}
    		.cs_jump_box input{ width: 25%;border: 1px solid #898989;height: 35px;margin: 10px 10px 10px 20px;}
    		.cs_jump_box button{border: none;height: 54px;position: absolute;right: 0; top: 0;background: linear-gradient(to right,#ff9118,#ffbe39);color: #fff;width: 30%;font-size: 16px;border-radius: 0;}
			.cs_jump_box label{color: #acacac;font-size: 16px;}
			.cs_jump_box span{margin-left: 30px;}	
			.cs_jump_box i{font-style: normal;color: #ffa224;}
    	</style>
		<title>历史净值</title>
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav jjs-header">
			<h2 class="mui-title">历史净值</h2>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left-result"></a>
			<a class="mui-icon mui-icon-bars mui-pull-right header-right"></a>
		</header>
		<div class="mui-content cs_nobg cs_jump_content">
			
			<div class="cs_card-box">
				<div class="mui-card">
					<div class="mui-card-content">
						<div class="cs_card_info">
							<span class="cs_tips_block blod_black">国金鑫盈货币市场证券投资基金-</span><span class="code-num">000439</span></div>
							
						</div>
						<div class="canvas_box">
							<div class="canvas_main" id="canvasbox">
								图表区
							</div>
						</div>
						
						<!--时间选择-->
						<div class="cs_time_box">
							<span class="start_time" onclick="select_time('s')">开始日期</span>至&nbsp;&nbsp;&nbsp;<span class="end_time" onclick="select_time('e')">结束日期</span><button type="button" class="mui-btn cs_btn_right">确定</button>
						</div>
						
						<!--信息列表-->
						<div class="cs_table_title flex-box t_cen">
							<div class="flex-1">发布日期</div>
							<div class="flex-1">单位净值</div>
							<div class="flex-1">累计净值</div>
							<div class="flex-1">日增长率</div>
						</div>
						<div class="cs_table_box">
							<ul class="cs_table_list_box">
								<li class="cs_table_list_item flex-box t_cen">
									<div class="flex-1">2017-10-13</div>
									<div class="flex-1">1.7953</div>
									<div class="flex-1">1.7856</div>
									<div class="flex-1">0.15501%</div>
								</li>
								<li class="cs_table_list_item flex-box t_cen">
									<div class="flex-1">2017-10-13</div>
									<div class="flex-1">1.7953</div>
									<div class="flex-1">1.7856</div>
									<div class="flex-1">0.15501%</div>
								</li>
								<li class="cs_table_list_item flex-box t_cen">
									<div class="flex-1">2017-10-13</div>
									<div class="flex-1">1.7953</div>
									<div class="flex-1">1.7856</div>
									<div class="flex-1">0.15501%</div>
								</li>
								<li class="cs_table_list_item flex-box t_cen">
									<div class="flex-1">2017-10-13</div>
									<div class="flex-1">1.7953</div>
									<div class="flex-1">1.7856</div>
									<div class="flex-1">0.15501%</div>
								</li>
								<li class="cs_table_list_item flex-box t_cen">
									<div class="flex-1">2017-10-13</div>
									<div class="flex-1">1.7953</div>
									<div class="flex-1">1.7856</div>
									<div class="flex-1">0.15501%</div>
								</li>
								<li class="cs_table_list_item flex-box t_cen">
									<div class="flex-1">2017-10-13</div>
									<div class="flex-1">1.7953</div>
									<div class="flex-1">1.7856</div>
									<div class="flex-1">0.15501%</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				
			</div>
			
		</div>	
		<form action="" class="cs_jump_box">
			<label for="">
				<input type="text" />页<span><i>1</i>/382</span>
			</label>
			<button type="button">跳转</button>
		</form>
		
		
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../js/echarts-all.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../js/echarts-all-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('canvasbox'));
			option = {
			    tooltip: {
			        trigger: 'item',
			        formatter: '{a} <br/>{b} : {c}'
			    },
			    xAxis: {
			        type: 'category',
			        name: 'x',
			        splitLine: {show: false},
			        data: ['1', '2', '3', '4', '5', '6', '7', '8'],
			        splitLine:{show: true}
			    },
			    grid: {
			    	top:'3%',
			        left: '0%',
			        right: '3%',
			        bottom: '0%',
			        containLabel: true
			    },
			    yAxis: {
			    	splitNumber:6,
			        type: 'value',
			        name: 'y',
			    },
			    series: [
			       
			        {
			            name: '2的指数',
			            type: 'line',
			            itemStyle : {  
                            normal : {  
                                lineStyle:{  
                                    color:'#D52F2F'  
                                }  
                            }  
                        }, 
			            data: [25, 95, 36, 46, 150, 86, 64, 128, 124],
			            symbol:'none',  //这句就是去掉点的  
//      				smooth:true,  //这句就是让曲线变平滑的 
			            
			        },
			       
			    ]
			};
//			显示图表
			myChart.setOption(option);
			
			var today = new Date();
			var yearNum = today.getFullYear();
			var options = {"type":"date","beginYear":1992,"endYear":yearNum}
			var picker = new mui.DtPicker(options);
			
//			选择时间
			function select_time (t) {
				picker.show(function  (rs) {
					console.log(JSON.stringify(rs))
					if(t=='s'){
//						开始时间
						$('.start_time').html(rs.y.text+'-'+rs.m.text+'-'+rs.d.text);
						
					}else{
//						结束时间
						$('.end_time').html(rs.y.text+'-'+rs.m.text+'-'+rs.d.text);
					}
				});
			}
			
			
//			加载数据只有跳转,没有下拉上划
		</script>
	</body>
</html>
